<template>
  <TemplateTitle
    titleName="每月目标完成率（%）"
    style="margin-bottom: 20rem"
  ></TemplateTitle>

  <div class="chart" style="margin-bottom: 20rem">
    <chart-line-bar
      :chartData="chartDataList"
      xAxisName="month"
      :option="option"
      :chartType="chartType"
      :twoYAxis="false"
      :unit="unit"
      :orient="'horizontal'"
    ></chart-line-bar>
  </div>
</template>

<script setup>
import TemplateTitle from "@/components/common/templateTitle.vue";
import ChartLineBar from "./charts/ChartLineBar.vue";
import homeHttp from "@/https/home.js";
import { onMounted, ref, watch, inject } from "vue";
import moment from "moment";

let chartDataList = ref([]);
const option = ref({});
const chartType = ref([
  {
    type: "line",
    code: "companyRate",
    name: "公司",
    linerColor: ["#369eff", "#369eff"],
  },
  {
    type: "line",
    code: "xingshaRate",
    name: "星沙厂",
    linerColor: ["#e33dff", "#e33dff"],
  },
  {
    type: "line",
    code: "cityNorthRate",
    name: "城北厂",
    linerColor: ["#ffc550", "#ffc550"],
  },
  {
    type: "line",
    code: "citySouthRate",
    name: "城南厂",
    linerColor: ["#b2e3e8", "#b2e3e8"],
  },
  {
    type: "line",
    code: "cityWestRate",
    name: "城西厂",
    linerColor: ["#85cc18", "#85cc18"],
  },
]);
const unit = ref(["%"]);

onMounted(() => {
  queryWaterCompleteRate(moment().format("YYYY"));
});

const year = inject("currentDataYear");
watch(year, (val) => {
  console.log(val, "val");
  queryWaterCompleteRate(val);
});
const queryWaterCompleteRate = (year) => {
  let params = {
    year: year,
  };
  homeHttp.queryWaterCompleteRate(params).then((res) => {
    if (res.data.code == 200) {
      res.data.data.forEach((item) => {
        item.month = item.month + "月";
      });
      let len = res.data.data.length;
      for (let i = 0; i < 6 - len; i++) {
        res.data.data.push({
          month: len + i + 1 + "月",
        });
      }
      chartDataList.value = res.data.data;
    }
  });
};
</script>

<style scoped></style>
